<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建套餐</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript" charset="utf-8" src="${ctx}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${ctx}/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="${ctx}/ueditor/third-party/9fm/9fm.v1.js"></script>

<script src="${ctx}/rs/js/jquery.validate.min.js"></script>
<!-- /joli/WebContent/resources/joli/js/plugins/jquery-validation/jquery.validate.js -->
<script src="${ctx}/rs/js/jquery.form.js" type="text/javascript"></script>
</head>
<body>
<style>
.inline{display:inline-block}
.table-div{border:1px solid #ccc;border-radius:5px;padding:6px;}
.table-group td{padding:6px}
</style>
<form id="form1" class="form-horizontal" action="${ctx}/TblComboInfo/save.htm" method="post" enctype="multipart/form-data">
      <div class="form-group">
        <label for="name" class="col-sm-2 control-label item ">套餐标题：</label>
        <div class="col-sm-6  ">
          <input type="text" class="form-control " id="comboTitle" name="comboTitle" />
          <input type="hidden" class="form-control " id="comboStatus" name="comboStatus" value= "0"/>
        </div>
        <span class="help-block col-sm-4" id="valierr" style="color:#FF9966">*</span>
      </div>

      <div class="form-group">
        <label for="name" class="col-sm-2 control-label item ">套餐图：</label>
        <div class="col-sm-6  ">
             <span id="preview" class="preview"> 
                 <img id="imghead" src="" alt="" class="damFront" />
             </span>
              <input type="file" id="cfile" name="cfile" class="upload" accept="image/*" />
                  <div class="colortxt" style="color: red">支持jpg/jpeg/png格式，建议尺寸148*148</div>
        </div>
        <span class="help-block col-sm-4" id="valierr" style="color:#FF9966">*</span>
      </div>
      
      <div class="form-group">
        <label for="name" class="col-sm-2 control-label item ">简介：</label>
        <div class="col-sm-6  ">
          <textarea class="form-control" rows="3" id="comboAbstract" name="comboAbstract"/>
        </div>
        <span class="help-block col-sm-4" id="valierr" style="color:#FF9966">*</span>
      </div>
      
         <div class="form-group">
            <label for="name" class="col-sm-2 control-label item ">套餐选项卡：</label>
            <div class="col-sm-9">
                 <div class="table-div">
					<table class="table-group">
						<thead>套餐A
						</thead>
						<tbody>
							<tr colspan="2" class="form-group">
								<td style="width:26%"><span class="help-block"
									style="color:#FF9966">*</span>市场价</td>
								<td width='74%'><input type="text"
									class="form-control marketPrice" id="marketPrice" name="marketPrice" />
								</td>
							</tr>
							<tr colspan="2" class="form-group">
								<td>
								    <span class="help-block" style="color:#FF9966">*</span>套餐价
								</td>
								<td>
								    <input type="text" class="form-control comboPrice" id="comboPrice" name="comboPrice" />
								</td>
							</tr>
							<tr colspan="2" class="form-group">
								<td><input type="hidden" class="form-control " id="tblName" name="tblName" value="套餐A" /> 
									<span class="help-block" id="valierr" style="color:#FF9966">*</span> 套餐A详情</td>
								<td>
									<div id="divContentTidA">
										<!--  <textarea class="form-control textarea-resize inline wid90" name = "tblIntroduce" rows="3" style="display: none;"></textarea> -->
										<input type="text" id="tblIntroduceA" name="tblIntroduceA"  class = "taocanxiangqingA" 
										style="backgroung:#fff;border:0;opacity:0;width:0;height:0"/>
										<!--style给定宽度可以影响编辑器的最终宽度-->
										<script type="text/plain" id="myEditor"
											style="width:480px;height:100px;"></script>
										<div id="errmsg"></div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
                 <a type onclick="showXuan()" id="addxuan"> 添加选项卡</a>
            </div>
      </div>
      <div class="form-group"   id="showXuan" style="display:none";>
      <a type onclick="hideXuan()" id="delxuan"> 删除 </a>
            <label for="name" class="col-sm-2 control-label item ">&nbsp;</label>
            <div class="col-sm-9 ">
                  <div class="table-div">
                      <table class="table-group">
                          <thead>套餐B</thead>
						<tbody>
							<tr colspan="2" class="form-group">
								<td width='26%'>
								    <span class="help-block" style="color:#FF9966">*</span>市场价
								</td>
								<td width='74%' >
								    <input type="text" class="form-control marketPrice" id="marketPriceB" name="marketPriceB"/>
								</td>
							</tr>
							<tr colspan="2" class="form-group">
								<td width='26%'>
								    <span class="help-block" style="color:#FF9966">*</span>套餐价
								</td>
								<td width='74%'>
								    <input type="text" class="form-control comboPrice" id="comboPriceB" name="comboPriceB"  />
								</td>
							</tr>
							<tr colspan="2" class="form-group">
								<td>
								    <input type="hidden" class="form-control " id="tblName" name="tblName" value="" />
								    <span class="help-block" id="valierr" style="color:#FF9966">*</span>套餐B详情
								 </td>
								<td>
									<div id="divContentTidB">
										 <input type="text" name = "tblIntroduceB" id= "tblIntroduceB" class="taocanxiangqingA" 
										 style="backgroung:#fff;border:0;opacity:0;width:0;height:0"  />
										<!--style给定宽度可以影响编辑器的最终宽度-->
										<script type="text/plain" id="myEditor2"
											style="width:480px;height:100px;"></script>
										<div id="errmsg"></div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
               </div>     
            </div>
      </div>
      <div class="form-group" >
                <label for="name" class="col-sm-2 control-label item wid1">套餐说明：</label>
                <div class="col-sm-9 wid2">
                     <input type="text" name = "comboIntroduce" id= "comboIntroduce" 
                      style="backgroung:#fff;border:0;opacity:0;width:0;height:0"/>
                     <!--style给定宽度可以影响编辑器的最终宽度-->
                    <script type="text/plain" id="myEditor3"  style="width:480px;height:100px;"></script>
                    <div id="errmsg"></div>
                </div>
                  <span class="help-block" id="valierr" style="color:#FF9966">*</span>
            </div>
       
      
      <div class="form-group">
        <div class="col-sm-10 text-center pt15">
             <button type="button" class="btn btn-primary btn-lg srt-btn active mr30" onclick="valiSubmit()">发送</button>
             <button type="reset" class="btn btn-default btn-lg srt-btn active">重置</button>
        </div>
      </div>

      <div class="form-group">
        <div class=" col-sm-10">
          <span id="error-text" style="color: #FF0000;"></span>
        </div>
      </div>
</form>

 <script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
    <script src="${ctx}/rs/js/messages_zh.min.js"></script>
    <script type="text/javascript" charset="utf-8"
        src="${ctx}/rs/js/umeditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8"
        src="${ctx}/rs/js/umeditor/umeditor.min.js"></script>
    <script type="text/javascript"
        src="${ctx}/rs/js/umeditor/lang/zh-cn/zh-cn.js"></script>
         <script src="${ctx}/rs/js/audioPlayer.js"></script>
   
<script type="text/javascript" >

$.validator.addMethod("codeType", function(value, element) {
    return this.optional(element) || /^(([1-9]\d{0,9})|0)(\.\d{1,2})?$/.test(value);
}, "请输入正确的金额!");
$.validator.addMethod("limitType", function(value, element) {
    var str = value.substr(value.lastIndexOf(".")).toLowerCase();
    return this.optional(element) || /.(png|jpg)$/.test(str);
}, "上传文件格式不正确!");

function showXuan(){
    $("#showXuan").show();
    $("#addxuan").hide();
}    
function hideXuan(){
    $("#addxuan").show();
    $("#showXuan").hide();
}    
var form = $('#form1');
form.validate({
    rules: {
        comboTitle: {
            maxlength: 30,
            required: true
        },
        comboAbstract: {
            maxlength: 60,
            required: true
        },
        marketPrice: {
        	min : 0,
        	max:99999999.99,
        	codeType :"codeType",
            required: true
        },
        marketPriceB: {
        	min : 0,
        	max:99999999.99,
        	codeType :"codeType",
            required: true
        },
        comboPrice: {
        	min : 0,
        	max:99999999.99,
        	codeType :"codeType",
            required: true
        },
        comboPriceB: {
        	min : 0,
        	max:99999999.99,
        	codeType :"codeType",
            required: true
        },
        tblIntroduceA : {
            required: true
        },
        tblIntroduceB : {
            required: true
        },
        cfile: {
        	limitType :"limitType",
            required: true
        },
       comboIntroduce: {
            required: true
        }
      },
      messages: {
    	
     },
      highlight: function(element) {
    	  
          $(element).closest('.form-group').removeClass('success').addClass('error');
      },
      success: function(element) {
          element.text('OK!').addClass('valid')
          .closest('.form-group').removeClass('error').addClass('success');
      }
});
jQuery.each($("myEditor3"),function(){
    alert($(this).attr("value"));
});
function valiSubmit() {
    if (form.valid() ) {
        var jsonData = [];
        
        $(".table-div").each(function(i,item){
            var marketPrice = $(this).find(".marketPrice").val();
            var comboPrice = $(this).find(".comboPrice").val();
            var tblIntroduce = $(this).find('.taocanxiangqingA').val();
            var tblName = $(this).find("#tblName").val();
            var j = {};
            j.marketPrice = marketPrice;
            j.comboPrice = comboPrice;
            j.tblIntroduce = tblIntroduce;
            j.tblName = tblName;
            jsonData.push(j);
        });
        var options = {
                dataType : "json",
                data : {
                	data : JSON.stringify(jsonData)
                },
                beforeSubmit : function() {
                    $(".unable").show();
                },
                success : function(result) {
                  
                    if (result) {
                        // 普通消息提示条
                        bootstrapQ.msg({
                            msg : '发布成功！',
                            type : 'success',
                            time : 2000
                        });
                        //触发隐藏确认的按钮，引用回调方法关闭窗口并刷新列表
                        $("button.bsok").click();
                    } else {
                        bootstrapQ.msg({
                            msg : '发布失败！',
                            type : 'danger',
                            time : 2000
                        });
                    }
                },
                error : function(result) {
                    if (!$('.unable').is(':hidden')) {
                        $(".unable").hide();
                    }
                    bootstrapQ.msg({
                        msg : '发布失败！',
                        type : 'danger',
                        time : 2000
                    });
                }
            };
            form.ajaxSubmit(options);
        }
    } 
    
    /** ue编辑器 start */
     var ue = UE.getEditor('myEditor');
        ue.addListener('blur', function() {
            //失去焦点，做一次保存操作
            //$("#tblIntroduce").val(ue.getContent());
//             $('input[name="tblIntroduce"]').val(ue.getContent())
            $('input[name="tblIntroduceA"]').val(ue.getContent())
        });
     var ue2 = UE.getEditor('myEditor2');
        ue2.addListener('blur', function() {
            //失去焦点，做一次保存操作
//             $("#tblIntroduceA").val(ue2.getContent());
            $('input[name="tblIntroduceB"]').val(ue2.getContent())
        });
     var ue3 = UE.getEditor('myEditor3');
        ue3.addListener('blur', function() {
            //失去焦点，做一次保存操作
            $('input[name="comboIntroduce"]').val(ue3.getContent())
        });
        

</script>
</body>
</html>